
{include file="common:head" /}


<style type="text/css">
	.swiper-container {
		width: 100%;
		height: 300px;
		margin-left: auto;
		margin-right: auto;
	}

	.swiper-slide {
		background-size: cover;
		background-position: center;
	}

	.gallery-top {
		height: 80%;
		width: 100%;
	}

	.gallery-thumbs {
		height: 100px;
		box-sizing: border-box;
		padding: 10px 0;
		margin-top: -100px;
	}

	.gallery-thumbs .swiper-slide {
		height: 100%;
		opacity: 1;
		border: 5px solid transparent;
	}

	.gallery-thumbs .swiper-slide-thumb-active {
		opacity: 1;
		border: 5px solid #ff9927;
	}
</style>


	<body>
		<div class="index-content">
			<!-- 头部 -->

			{include file="common:header" /}

			<!-- 车辆详情 -->
			<div class="discount">
				<div class="width1300">
					<div class="carDetail-info clearfix">
						<!-- 轮播图 -->
						<div class="swiper-container gallery-top" style="height: 573px;">
						  <div class="swiper-wrapper">

							  {volist name="banner" id = "item"}
						    		<div class="swiper-slide" style="background-image:url({$item.img});background-size: cover"></div>
							  {/volist}

						  </div>
						  <!-- Add Arrows -->
						  <div class="swiper-button-next swiper-button-white"></div>
						  <div class="swiper-button-prev swiper-button-white"></div>
						</div>
<!--						<div class="swiper-container gallery-thumbs">-->
<!--						  <div class="swiper-wrapper">-->

<!--							  {volist name="banner" id = "item"}-->
<!--						    	<div class="swiper-slide" style="background-image:url({$item.img})"></div>-->
<!--							  {/volist}-->

<!--						  </div>-->
<!--						</div>-->
					</div>
					<div class="discount-count">
						<h2>优惠资讯</h2>
						<div class="discount-all clearfix">

							{volist name="list" id = "item"}

							<div class="discount-list" onclick="openwin('{:url(\'index/article/detail\')}' + '?id=' + {$item.id})">
								<div class="img-box">
									<img src="{$item.image}" >
								</div>
								<h3 class="twoline">{$item.title}</h3>
								<p class="clearfix">
									<span class="iconfont icon-yj fl">{$item.view}</span>
									<span class="fr">{$item.create_time | date="Y-m-d"}</span>
								</p>
							</div>

							{/volist}


						</div>
					</div>
				</div>

				<!-- 底部 -->

				{include file="common:footer" /}

			</div>
			<script type="text/javascript" src="__STATIC__/index/js/jquery-3.2.1.min.js"></script>
			<script type="text/javascript" src="__STATIC__/index/js/swiper.min.js"></script>
			<script type="text/javascript" src="__STATIC__/index/js/common.js"></script>
			<script type="text/javascript" src="__STATIC__/index/js/header_move.js"></script>

			<script type="text/javascript">
				
				    var galleryThumbs = new Swiper('.gallery-thumbs', {
				      spaceBetween: 10,
				      slidesPerView: 4,
				      loop: true,
				      freeMode: true,
				      loopedSlides: 5, //looped slides should be the same
				      watchSlidesVisibility: true,
				      watchSlidesProgress: true,
				    });
				    var galleryTop = new Swiper('.gallery-top', {
				      spaceBetween: 10,
				      loop: true,
				      loopedSlides: 5, //looped slides should be the same
				      navigation: {
				        nextEl: '.swiper-button-next',
				        prevEl: '.swiper-button-prev',
				      },
				      thumbs: {
				        swiper: galleryThumbs,
				      },
				    });
				  
			</script>
	</body>
</html>
